<template>
  <a-card title="客户基本资料">
    <template slot="extra">
      <a-button size="small" type="primary" icon="edit" @click="submitBaseInfo">保存信息</a-button>
    </template>
    <a-spin :spinning="baseLoading">
      <a-row
        :style="{ borderLeft:'solid 3px #40a9ff', backgroundColor: 'rgba(64,169,255,0.3)', padding: '15px 10px', marginBottom: '20px' }">
        <a-col :span="24">
          <div>客户来源：{{baseInfoForm.source}}</div>
          <div>入库时间：{{baseInfoForm.created_at}} / 领取时间：{{baseInfoForm.received_at}}</div>
        </a-col>
      </a-row>
      <a-form-model
        ref="form"
        :model="baseInfoForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row :gutter="10">
          <a-col :span="12">
            <a-form-model-item label="客户姓名">
              <a-input v-model="baseInfoForm.customer_name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话1">
              <a-input readOnly v-model="baseInfoForm.phone" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="商标名称">
              <a-input readOnly v-model="baseInfoForm.tm_name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="专利名称">
              <a-input readOnly v-model="baseInfoForm.pt_name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话2">
              <a-input v-model="baseInfoForm.phone2" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请主体">
              <a-input v-model="baseInfoForm.subject_of_application" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属行业">
              <a-input placeholder="输入所属行业" v-model="baseInfoForm.industry" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户微信">
              <a-input placeholder="输入客户微信号" v-model="baseInfoForm.wechat" />
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="12">-->
<!--            <a-form-model-item label="客户邮箱">-->
<!--              <a-input placeholder="输入客户邮箱" v-model="baseInfoForm.email" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="客户状态" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="customer_status">
              <a-select v-model="baseInfoForm.customer_status">
                <a-select-option v-for="(item,index) in statusOpt" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-textarea rows="3" placeholder="输入备注信息" v-model="baseInfoForm.notes"></a-textarea>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import { getCustomerDetail, postCustomerDetail } from '@/api/customer'

export default {
  props: {
    keys: {
      type: String,
      default: ''
    }
  },
  name: 'Base',
  data () {
    return {
      baseLoading: true,
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      baseInfoForm: {},
      statusOpt: {},
      rules: {
        customer_name: [
          { require: true, message: '必须填写用户姓名', trigger: 'blur' }
        ],
        customer_status: [
          { require: true, message: '必须选择客户状态', trigger: 'change' }
        ]
      },
      loading: true
    }
  },
  created () {
    this.getDetail(this.keys)
  },
  methods: {
    getDetail (id) {
      const app = this
      app.baseLoading = true
      getCustomerDetail(id).then(res => {
        if (res.status === 0) {
          app.baseInfoForm = res.result.customer
          app.statusOpt = res.result.customer_status_opts
          app.baseLoading = false
        } else {
          app.$warning({
            title: res.msg,
            onOk: () => {
              app.$router.go(-1)
            }
          })
        }
      })
    },
    submitBaseInfo () {
      const app = this
      app.$refs.form.validate(valid => {
        if (valid) {
          const data = {}
          const form = app.baseInfoForm
          for (const k in form) {
            data['customer[' + k + ']'] = form[k]
          }
          postCustomerDetail(app.keys, data).then(res => {
            if (res.status === 0) {
              app.getDetail(app.keys)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
